<template>
  <div class="goods">
		<!-- 左菜单menu，右食物food -->
		<div class="menu-wrapper" ref="menuWrapper">
			<!-- 列表：ul>li（格子）>span（文字） -->
			<ul>
				<!-- 下面4获取到了currentIndex，这是一个计算属性，根据响应式依赖进行缓存，只要绑定的属性不发生变化，即scollY不变化，currentIndex会一直用之前计算的结果 -->
				<!-- 5.判断左侧menu当前索引（currentIndex）是否等于右侧food区的index，如果true（证明是左侧currentIndex等于右侧index），为当前的li添加一个current样式（css样式） -->
				<!-- 6.如何获取右侧food区的index，即实现点击左侧右侧滚动， 添加点击事件selectMenu，将index传进去，就可以知道点选的是哪个区域，然后利用原生DOM操作将高度滚动到相应的位置-->
				<!-- index是传入的index，$event, index是遍历goods获取的index，即绑定key的index-->
				<!-- 在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。 -->
				<li class="menu-item"
						v-for="(item,index) in goods"
						:key="index"
						:class="{'current': currentIndex === index}"
						@click="selectMenu(index,$event)">
					<span class="text">
						<!-- 细节（v-show,提前设置classMap数组，绑定class） -->
						<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> 	
						{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" ref="foodsWrapper">
			<!-- 列表：ul>li.food-list>h1.title+ul>li.food-item>div.icon{img}+div.content-->
			<ul>
				<!-- 细节food-list-hook，对应1 -->
				<li class="food-list food-list-hook"
						v-for="(item,index) in goods"
						:key="index">
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li class="food-item"
								v-for="(food,index) in item.foods"
								:key="index">
							<div class="icon">
								<img :src="food.icon">
							</div>
							<div class="content">
								<!-- 内容：span.name+p.description+div.extra+div.price -->
								<span class="name">{{food.name}}</span>
								<p class="description">{{food.decription}}</p>
								<div class="extra">
									<span>月售{{food.sellCount}}份</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span>
									<span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
									<v-cartcontrol :food="food"></v-cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<v-shopcart></v-shopcart>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
import cartcontrol from '@/components/cartcontrol'
import shopcart from '@/components/shopcart'

const ERR_OK = 0

export default {
	components: {
		'v-cartcontrol': cartcontrol,
		'v-shopcart': shopcart
	},
	data() {
		return {
			goods: [],
			listHeight: [],
			// 2
			scrollY: 0//跟踪滚动的高度
		}
	},
	created () {
		this.classMap = ['decrease','descount','guarantee','invoice','special'],
		this.$http.get('api/goods')
			.then(res => {
				res = res.data
				if (res.errno === ERR_OK) {
					this.goods = res.data
					// console.log(this.goods)
					this.$nextTick(()=>{
						 this._initScroll()
						 this._calculateHeight()
					})
        }
			})
	},
	methods: {
		// 3
		_initScroll () {
			// this.menuScroll = new BScroll(this.$refs.menuWrapper,{})
			// this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
			// 因为BScroll默认阻止点击事件，△：所以在 _initScroll()中获取DOM对象时添加click: true,并解决PC端双点击问题
			this.meunScroll=new BScroll(this.$refs.menuWrapper,{
				click: true //使better-scroll可点击，默认派发一个点击事件
			})
			this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{
				click: true,//使better-scroll可点击，默认派发一个点击事件
				probeType: 3 //BScroll滚动时，能实时告诉我们滚动的位置，类似探针的效果 ???
				//可以检测到右侧实时滚动的位置，监听scroll，将其实时滚动的位置暴露出来
			})
			//foodsScroll监听事件,在scroll滚动时能见位置实时暴露出来
			this.foodsScroll.on('scroll', (pos) => {
				this.scrollY = Math.abs(Math.round(pos.y))//本身是个负值，math.round取接近的数，-8.49取-8，-8.5取-8，-8.51取-9，math.abs取正值（绝对值）
			})
		},
		// 1
		_calculateHeight () {
			//food-list-hook类的添加知识为了能拿到food列表,例如，拿到的是多个类似整个粥品的区块
			let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
			// console.log(foodList)
			let height = 0
			this.listHeight.push(height)//listHeight是一个递增的区间数组，是每个专区高度的累加
			for (let i=0;i<foodList.length;i++) {
				let item = foodList[i]
				height += item.clientHeight
				this.listHeight.push(height)
			}
			// console.log(this.listHeight)
		},
		/*
			【点击左侧右侧滚动】思路&实现：
			1.在左侧菜单栏添加点击事件selectMenu， @click = "selectMenu(index, $event)"，将index传进去，就可以知道点选的是哪个区域，然后利用原生DOM操作将高度滚动到相应的位置
			2.点击左侧菜单栏的时候没有反应，因为BScroll默认阻止点击事件，△：所以在 _initScroll()中获取DOM对象时添加click: true,并解决PC端双点击问题，event是点击时的event
		*/
		// 6.左侧菜单选择事件
		selectMenu (index, event) {
			if (!event._constructed) {//浏览器直接return掉,去掉自带click事件的点击
				return
			}
			// console.log(index)	//1
			// 这里获取dom元素
			let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook')
			// console.log(foodList) //数组：dom
			// （数组）获取index对应的dom, el：element元素
			let el = foodList[index]
			// scrollToElement 跳转到某个元素，第一个参数是dom元素，第二个是时间（毫秒）
			this.foodsScroll.scrollToElement(el,300)
		}
	},
	computed: {
		// 4.查看scrollY落在哪个区间，并返回那个区间的索引
		currentIndex () {//currentIndex对应菜单栏的下标
			for (let i=0;i<this.listHeight.length;i++){
				let height1 = this.listHeight[i]	//字体上的横线
				let height2 = this.listHeight[i+1]//字体下的横线
				// 获取区间的上下范围，判断scrollY落到哪个区间，!height2是判断最后一个区间
				//length=10,i=9,listHeight[i+1]=listHeight[10]=undefined  !undefined=true
				//避免i溢出，>= 向下的是一个闭区间，这样第一个就会高亮了   0=< scrollY <2
				if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
					return i//映射到第5行menu的变化
				}
			}
			// 如果height2为最后一个区间（有一小段空间），则默认返回0，回到顶部
			return 0
		}
	} 	
}
</script>

<style lang="stylus" scoped>
@import  "../../common/stylus/mixin"

.goods
	display: flex
	position: absolute
	top: 174px
	bottom: 46px
	width: 100%
	overflow: hidden
	.menu-wrapper
		flex: 0 0 80px
		width: 80px
		background: #f3f5f7
		.menu-item 
			display: table
			height: 54px
			width: 56px
			line-height: 16px
			padding: 0 12px
			// 对应5，当点击左侧菜单menu的某个li，li添加样式，主要是背景色和字体粗细度，然后当前字体取消上下边框（细节：.text：border-none(),主要指得是设置class=current的li在子选择器text采用引入的取消上下边框的样式）
			&.current
				position: relative
				z-index: 10
				margin-top: -1px
				background: #fff
				font-weight: 700
				.text
					border-none()
			.text
				display: table-cell
				width: 56px
				vertical-align: middle
				font-size: 12px	
				border-1px(rgba(7, 17, 27, 0.1))
				.icon
					display: inline-block
					vertical-align: top
					width: 12px
					height: 12px
					margin-left: 2px
					background-size: 12px 12px
					background-repeat: no-repeat
					&.decrease
						bg-image('decrease_3')
					&.descount
						bg-image('discount_3')
					&.guarantee
						bg-image('guarantee_3')
					&.invoice
						bg-image('invoice_3')
					&.special
						bg-image('special_3')
	.foods-wrapper
		flex: 1
		.title
			padding-left: 14px
			height: 26px
			line-height: 26px
			border-left: 2px solid #d9ddel
			font-size: 12px
			color: rgb(147, 153, 159)
			background: #f3f5f7
		.food-item
			display: flex
			margin: 18px
			padding-bottom: 18px
			border-1px(rgba(7, 17, 27, 0.1))
			&:last-child
				border-none()
				margin-bottom: 0
			.icon 
				flex: 0 0 57px
				margin-right: 10px
				img
					width: 100px
					height: 100px
			.content 
				flex: 1
				.name 
					margin: 2px 0 8px 0
					height: 17px
					line-height: 17px
					font-size: 19px
					color: rgb(7, 17, 27)
				.description, .extra
					font-size: 10px
					color: rgb(147,153,159)
				.description
					margin-bottom: 8px
					line-height: 12px
				.extra
					line-height: 10px
				.price
					font-weight: 700
					line-height: 24px
					.now
						margin-right: 8px
						font-size 14px
						color: rgb(240,20,20)
						font-weight: bold
					.old
						text-decoration: line-through
						font-size: 10px
						color: rgb(147, 153, 159)
				.cartcontrol-wrapper
					position: absolute
					right: 0
					bottom: 12px
</style>